<template>
  <div class="out">
    <div class="container">
      <div class="left">
        <div class="title">📔 QueOJ 题目列表</div>
        <div class="toolbar">
          <div class="toolbar-left-search">
            <el-input placeholder="输入题目名称" v-model="searchVal"></el-input>
          </div>
          <el-button @click="search">搜索题目</el-button>
          <el-button @click="randomProblem">随机开始</el-button>
          <el-select v-model="tags" multiple placeholder="标签筛选" @change="search">
            <el-option
                v-for="item in allTags"
                :key="item.v"
                :label="item.name"
                :value="item.v"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <div class="ques-list">
            <el-row class="ques-head">
              <el-col :span="4">ID</el-col>
              <el-col :span="8">题名</el-col>
              <el-col :span="3">分数</el-col>
              <el-col :span="3">难度</el-col>
              <el-col :span="6">标签</el-col>
            </el-row>
            <div v-if="!ready" class="m-load" v-loading="!ready">
              题目加载中
            </div>
            <div v-else-if="ready && problems.length === 0 ">
              <el-empty description="题目列表为空"></el-empty>
            </div>
            <div v-else v-for="p in problems" :key="p.id">
              <div class="ques-row" @click="$goRoute('/work/'+p.id)">
                <el-row style="display: flex;align-items: center">
                  <el-col :span="4">{{p.id}}</el-col>
                  <el-col :span="8">{{p.name}}</el-col>
                  <el-col :span="3">{{p.point}}</el-col>
                  <el-col :span="3">
                    <el-tag type="danger" v-if="p.level==3">
                      困难
                    </el-tag>
                    <el-tag type="warning" v-else-if="p.level==2">
                      中等
                    </el-tag>
                    <el-tag type="success" v-else>
                      简单
                    </el-tag>
                  </el-col>
                  <el-col :span="6" >
                    <el-tag v-for="t in p.tags" style="margin: 0 10px">
                      {{getTagName(t)}}
                    </el-tag>
                  </el-col>

                </el-row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">🔥 热题榜 </div>
        <div class="hot-list">
          <div class="hot-item" v-for="(item,i) in hot" @click="$goRoute('/work/'+item.id)">
            <div class="hot-rank">
              <span>
                {{i + 1}}
              </span>
            </div>
            <div class="hot-name">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import {Problem} from "../utils/http/problem";
import {Tag} from "../utils/http/tags";

export default {
  name: "ProblemSet",
  data: function () {
    return {
      ready: false,
      problems: [],
      allTags : Tag.getAllTags(),
      tags :[],
      searchVal :"",
      hot:[]
    }
  },
  methods: {
    getTagName : Tag.getTagById,
    search : async function(){
      let resp = await Problem.getAll();
      this.ready = true
      if (resp.success) {
        let ps = resp.data.problems.filter(p => p.name?.includes(this.searchVal))
        ps.forEach(p => p.tags = JSON.parse(p.tags))
        if (this.tags.length !== 0){
          ps = ps.filter(p =>{
            let ts = this.tags.map(v=>parseInt(v))
            for (let t of p.tags){
              if (ts.indexOf(t) >= 0){
                return true
              }
            }
            return false
          })
        }
        this.problems = ps;
      }
    },
    getHot : async function(){
      let resp = await Problem.getHot();
      if (resp.success){
        this.hot = resp.data.problems.filter(v => !!v)
      }else {
        this.$error("加载热题榜失败")
      }
    },
    randomProblem(){
      let len = this.problems?.length??0
      if (len === 0){
        return
      }
      let index = Math.floor(Math.random()*len);
      this.$goRoute('/work/'+this.problems[index].id)
    }
  },
  async mounted() {
    let resp = await Problem.getAll();
    this.ready = true
    if (resp.success) {
      let ps = resp.data.problems;
      ps.forEach(p=>p.tags = JSON.parse(p.tags))
      this.problems = ps;
    }else {
      this.$error("加载题目列表出错，请稍后重试")
    }

    this.getHot()
  }

}
</script>

<style scoped>

.out {
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  margin: 30px auto;
  width: 1400px;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.right {
  padding: 0 30px;
  box-sizing: border-box;
  width: 30%;
  display: flex;
  flex-direction: column;

}

.toolbar {
  display: flex;
  margin: 20px;
  justify-content: space-between;
}

.toolbar-left-search {
  width: 50%;
}
.title {
  font-size: 36px;
  margin-bottom: 20px;
}
.ques-list{
  margin-top: 20px;
}
.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
  cursor: pointer;
}

.m-load{
  height: 200px;
  padding-top: 100px;
  font-size: 30px;
}

.ques-row:hover{
  background: rgba(231, 246, 252, 0.78);
}

.hot-list{
  display: flex;
  flex-direction: column;
}

.hot-item{
  display: flex;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .12);
  padding: 10px;
  font-size: 16px;
  align-items: center;
  margin: 10px;
}

.hot-rank{
  width: 30px;
  height: 30px;
  border: 1px solid blue;
  border-radius: 15px;
  font-size: 19px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-right: 20px;
}
</style>
